<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="../../plugin/layui/css/layui.css" />
    <link rel="stylesheet" href="../../plugin/swiper/swiper.min.css" />
    <link rel="stylesheet" href="../../css/common.css" />
    <link rel="stylesheet" href="../../css/style.css" />
    <link rel="stylesheet" href="../css/company.css" />
    <link rel="stylesheet" href="../../css/fonts/iconfont.css" />
    <link rel="stylesheet" href="../../plugin/summernote/summernote.css" />
    <link rel="stylesheet" href="../../plugin/zTree/css/zTreeStyle.css" />
    <link rel="stylesheet" href="../../css/theme/gray.css" />
    <link rel="stylesheet" href="../css/theme/black.css" />
    <script type="text/javascript" src="../../js/jquery.js"></script>
    <script type="text/javascript" src="../../plugin/layui/layui.js"></script>

    <script type="text/javascript" src="../../js/echarts.min.js"></script>
    <script type="text/javascript" src="../../js/menu.js"></script>
    <script
      type="text/javascript"
      src="../../plugin/swiper/swiper.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../plugin/bootstrap/js/bootstrap.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../plugin/summernote/summernote.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../plugin/zTree/js/jquery.ztree.all.min.js"
    ></script>
    <script type="text/javascript" src="../../js/common.js?r=11"></script>
    <script type="text/javascript" src="../js/company_common.js"></script>
  </head>
  <body class="child_body">
    <div class="homePage" id="homePage">
      <!-- <div class="common_modal">
        <div id="selectTest" class="comSelectBox m-b-10"></div>
        <div id="selectTest2" class="comSelectBox m-b-10"></div>
        <div id="selectTest3" class="comSelectBox m-b-10"></div>
      </div> -->
      <div class="firstTab flex justify-around content-around">
        <!-- <div class="common_title fw600"><span>头条展示</span></div> -->

        <div class="item item1 flex-1 flex items-center">
          <span class="iconfont icon-xiaoshou1"></span>
          <div class="info">
            <div class="number fw600 fs20">
              <!-- <span>{{ sumObj.amountTodaySale }}</span> -->
              <span>100</span>
              <!-- <span class="fs15">吨</span> -->
            </div>
            <div>今日销售总额</div>
          </div>
        </div>
        <div class="item item2 flex-1 flex items-center">
          <span class="iconfont icon-chuku"></span>
          <div class="info">
            <div class="number fw600 fs20">
              <!-- <span>{{ sumObj.goodsTodayUp }}</span> -->
              <span>100</span>
              <!-- <span class="fs15">吨</span> -->
            </div>
            <div>今日现货上架总量</div>
          </div>
        </div>
        <div class="item item3 flex-1 flex items-center">
          <span class="iconfont icon-02gongyegongcheng_jiagong"></span>
          <div class="info">
            <div class="number fw600 fs20">
              <!-- <span>{{ sumObj.ordersIng }}</span> -->
              <span>100</span>
              <!-- <span class="fs15">吨</span> -->
            </div>
            <div>销售订单</div>
          </div>
        </div>
        <div class="item item4 flex-1 flex items-center">
          <span class="iconfont icon-ruku"></span>
          <div class="info">
            <div class="number fw600 fs20">
              <!-- <span>{{ sumObj.weightTodayInStore }}</span> -->
              <span>100</span>
              <span class="fs15">吨</span>
            </div>
            <div>入库重量</div>
          </div>
        </div>
        <div class="item item5 flex-1 flex items-center">
          <span class="iconfont icon-xiaoshouhetong_icox"></span>
          <div class="info">
            <div class="number fw600 fs20">
              <!-- <span>{{ sumObj.saleContract }}</span> -->
              <span>100</span>
            </div>
            <div>销售合同</div>
          </div>
        </div>
        <div class="item item6 flex-1 flex items-center">
          <span class="iconfont icon-xiaoshouhetong_icox"></span>
          <div class="info">
            <div class="number fw600 fs20">
              <!-- <span>{{ sumObj.purchaseContract }}</span> -->
              <span>100</span>
            </div>
            <div>采购合同</div>
          </div>
        </div>
        <div class="item item7 flex-1 flex items-center">
          <span class="iconfont icon-yichang"></span>
          <div class="info">
            <div class="number fw600 fs20">
              <!-- <span>{{ sumObj.invError }}</span> -->
              <span>100</span>
            </div>
            <div>异常库存</div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="flex-1">
          <div class="taskCenter common_modal">
            <div class="com_title">
              <span class="text">任务中心</span>
            </div>
            <div class="listBox clearfix">
              <div class="item">
                <span class="iconfont icon-daishenpiliebiao-">
                  <!-- <span class="number" v-if="taskObj.numApprove > 0">
                    {{ taskObj.numApprove > 99 ? "..." : taskObj.numApprove }}
                  </span> -->
                  <span class="number">11</span>
                </span>
                <div class="text">待审批</div>
              </div>
              <div class="item">
                <span class="iconfont icon-dingdandaifukuan">
                  <!-- <span class="number" v-if="taskObj.numPay > 0">
                    {{ taskObj.numPay > 99 ? "..." : taskObj.numPay }}
                  </span> -->
                  <span class="number">11</span>
                </span>
                <div class="text">待付款</div>
              </div>
              <div class="item">
                <span class="iconfont icon-shoukuandan">
                  <!-- <span class="number" v-if="taskObj.numPayment > 0">
                    {{ taskObj.numPayment > 99 ? "..." : taskObj.numPayment }}
                  </span> -->
                  <span class="number">11</span>
                </span>
                <div class="text">待收款</div>
              </div>
              <div class="item">
                <span class="iconfont icon-jurassic_danju">
                  <!-- <span class="number" v-if="taskObj.numSettleSale > 0">
                    {{ taskObj.numSettleSale > 99 ? "..." :
                    taskObj.numSettleSale }}
                  </span> -->
                  <span class="number">11</span>
                </span>
                <div class="text">待销售结算</div>
              </div>
              <div class="item">
                <span class="iconfont icon-dingdandaifukuan">
                  <!-- <span class="number" v-if="taskObj.numSettlePurchase > 0">
                    {{ taskObj.numSettlePurchase > 99 ? "..." :
                    taskObj.numSettlePurchase }}
                  </span> -->
                  <span class="number">11</span>
                </span>
                <div class="text">待采购结算</div>
              </div>
              <div class="item">
                <span class="iconfont icon-daitihuo">
                  <!-- <span class="number" v-if="taskObj.numOrderReturn > 0">
                    {{ taskObj.numOrderReturn > 99 ? "..." :
                    taskObj.numOrderReturn }}
                  </span> -->
                  <span class="number">11</span>
                </span>
                <div class="text">送货单签收</div>
              </div>
            </div>
          </div>
          <div class="usedFun common_modal">
            <div class="com_title">
              <span class="text">常用功能</span>
            </div>
            <div class="listBox clearfix">
              <!-- <div
                class="item"
                v-for="item in quickMenu"
                :key="item.id"
                @click="qucikClick(item)"
                :style="`width:${100 / quickMenu.length}%`"
              >
                <span class="iconfont icon-jurassic_danju"></span>
                <div class="text">{{ item.name }}</div>
              </div> -->
              <div class="item">
                <span class="iconfont icon-jurassic_danju"></span>
                <div class="text">快捷菜单</div>
              </div>
            </div>
          </div>
        </div>

        <div class="noticeModal">
          <div class="common_modal noticeBanner">
            <div class="swiper" id="noticeBanner">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="../images/banner/b1.jpg" />
                </div>
                <div class="swiper-slide">
                  <img src="../images/banner/b2.jpg" />
                </div>
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>
            </div>
          </div>
          <div class="common_modal notice">
            <div class="com_title flex p-t-5">
              <div class="comTabList lineTab flex-1">
                <div class="item active">平台公告</div>
                <div class="item">更新记录</div>
              </div>
              <!-- v-if="noticeList.length" -->
              <div style="width: 20%; text-align: right">
                <a class="titleMore" @click="moreNoticeClick">更多</a>
              </div>
            </div>
            <ul class="noticeList" v-if="noticeList.length">
              <li>
                通知标题
                <span class="time">2024-01-20</span>
              </li>
            </ul>
            <div v-else class="noData" style="padding-top: 50px">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="common_modal saleModal m-b-15">
          <div class="saleView" id="barView"></div>
        </div>
        <div class="common_modal flex-1 m-b-15">
          <div class="storageView" id="columnarView"></div>
        </div>
      </div>
      <com-dialog ref="noticeDialog" :dialogVO="noticeVO">
        <template slot="dialogBody" class="">
          <ul class="noticeList" v-if="noticeVO.noticeList.length">
            <li
              v-for="(item, index) in noticeVO.noticeList"
              :key="index"
              @click="noticeDetailClick(item)"
            >
              {{ item.title }}
              <span class="time">{{ item.publishTime }}</span>
            </li>
          </ul>
          <div v-else class="noData" style="padding: 50px">暂无数据</div>
        </template>
      </com-dialog>
      <com-dialog ref="noticeDetailDialog" :dialogVO="noticeDetailVO">
        <template slot="dialogBody">
          <div
            v-if="noticeDetailVO.content"
            v-html="noticeDetailVO.content"
          ></div>
          <div v-else class="noData" style="padding: 50px">暂无数据</div>
        </template>
      </com-dialog>
    </div>
  </body>
  <script>
    $(function () {
      // $("#selectTest").comSelect({
      //   mutiselect: true,
      //   data: [
      //     { name: "ceshi1", id: 111 },
      //     { name: "ceshi2", id: 222 },
      //   ],
      // });
      // $("#selectTest2").comSelect({
      //   mutiselect: true,
      //   data: [
      //     { name: "ceshi1", id: 111 },
      //     { name: "ceshi2", id: 222 },
      //   ],
      // });
      // $("#selectTest3").comSelect({
      //   data: [
      //     { name: "ceshi1", id: 111 },
      //     { name: "ceshi2", id: 222 },
      //   ],
      // });
      // setTimeout(() => {
      //   console.log($("#selectTest").getSelectValue());
      // }, 5000);
      setBarView();
      setMapView();
      initBanner();
    });
    function initBanner() {
      var bannerSwiper = new Swiper("#noticeBanner", {
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
        },
      });
    }
    function setBarView() {
      var myChart = echarts.init(document.getElementById("barView"));
      myChart.setOption({
        title: {
          text: "月销售统计",
          // left: "left",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          show: false,
        },
        legend: {
          top: 20,
          data: ["销售量", "销售金额"],
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "销售量",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} 吨",
            },
          },
          {
            type: "value",
            name: "销售金额",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} 万元",
            },
          },
        ],
        grid: {
          top: "18%",
          bottom: "7%",
          right: "10%",
        },
        series: [
          {
            name: "销售量",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 吨";
              },
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: "销售金额",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 万元";
              },
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
        ],
      });
      $(window, parent.document).on("resize", function () {
        myChart.resize();
      });
    }
    function setMapView() {
      var myChart = echarts.init(document.getElementById("columnarView"));
      var option = {
        title: {
          text: "库存比例",
          // left: "left",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          right: "2%",
          top: "center",
          orient: "vertical",
          data: ["牌号1", "牌号2", "牌号3", "牌号4", "牌号5"],
        },
        series: [
          {
            type: "pie",
            name: "库存",
            radius: "65%",
            center: ["40%", "50%"],
            selectedMode: "single",
            label: {
              formatter: "{b|{b}：}{c}  {per|{d}%}",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 1,
              borderRadius: 4,
              padding: 5,
              rich: {
                b: {
                  color: "#4C5058",
                  fontSize: 12,
                  fontWeight: "bold",
                  lineHeight: 20,
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#4C5058",
                  padding: [3, 4],
                  fontSize: 12,
                  borderRadius: 4,
                },
              },
            },
            data: [
              { value: 1548, name: "牌号1" },
              { value: 735, name: "牌号2" },
              { value: 510, name: "牌号3" },
              { value: 434, name: "牌号4" },
              { value: 335, name: "牌号5" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      $(window, parent.document).on("resize", function () {
        myChart.resize();
      });
    }
  </script>
</html>
